<template>
  <div class="flow">
    <div class="content">
      <!--左侧工具栏-->
      <div id="stencil"></div>

      <div class="panel">
        <!--流程图工具栏-->
        <div class="toolbar"></div>
        <div id="container"></div>
      </div>

      <!--右侧工具栏-->
      <div class="config"></div>
    </div>
  </div>
</template>
<script>
import { Graph, Addon, FunctionExt, Shape } from "@antv/x6";
import { Stencil } from "@antv/x6-plugin-stencil";

export default {
  name: "antvx6-flow3",
  data(){
    return{
      graph:null,
      stencil:null
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },
  methods:{
    init(){
      this.graph = new Graph({
        background: {
          color: '#a5a5a5' // 设置画布背景颜色
        },
        container: document.getElementById("container"), //画板的dom容器
        width: 1000, //画板的宽度
        height: 800, //画板的高度
        autoResize: true,
        grid: {
          size: 10,
          visible: true,
          type: 'doubleMesh',
          args: [
            {
              color: '#cccccc',
              thickness: 1,
            },
            {
              color: '#5F95FF',
              thickness: 1,
              factor: 4,
            },
          ],
        },
        scroller: {
          enabled: false,
          pageVisible: false,
          pageBreak: false,
          pannable: false,
        },
        // 开启画布缩放
        mousewheel: {
          enabled: true,
          modifiers: ['ctrl', 'meta'],
          minScale: 0.5,
          maxScale: 2,
        },
        connecting: {
          snap: true, // 是否自动吸附
          allowMulti: true, // 是否允许在相同的起始节点和终止之间创建多条边
          allowNode: false, // 是否允许边链接到节点（非节点上的链接桩）
          allowBlank: false, // 是否允许连接到空白点
          allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，
          allowEdge: false, // 是否允许边链接到另一个边
          highlight: true, // 拖动边时，是否高亮显示所有可用的连接桩或节点
          connectionPoint: "anchor", // 指定连接点
          anchor: "center", // 指定被连接的节点的锚点
          createEdge() {
            // X6 的 Shape 命名空间中内置 Edge、DoubleEdge、ShadowEdge 三种边
            return new Shape.DoubleEdge({
              attrs: {
                // line: {
                //   // stroke: '#5F95FF',
                //   // strokeWidth: 4,
                //   // targetMarker: {
                //   //   name: 'classic',
                //   //   size: 8,
                //   // },
                //   stroke: '#1890ff',
                //   strokeDasharray: 5,
                //   targetMarker: null,//block classic diamond cross async path circle circlePlus ellipse
                //   style: {
                //     animation: 'ant-line 30s infinite linear',
                //   },
                // },
                line: {
                  strokeWidth: 8,
                  stroke: '#e54033',
                  strokeDasharray: 5,
                  style: {
                    animation: 'ant-line 30s infinite linear',
                  },
                  targetMarker: null, // 去掉箭头
                },
                outline: {
                  stroke: '#73d13d',
                  strokeWidth: 15,
                }
              },
              router: {
                name: 'metro',
              }
            })
          },
          validateConnection({
                               sourceView,
                               targetView,
                               sourceMagnet,
                               targetMagnet,
                             }) {
            if (sourceView === targetView) {
              return false
            }
            if (!sourceMagnet) {
              return false
            }
            if (!targetMagnet) {
              return false
            }
            return true
          },
        },
        highlighting: {
          magnetAvailable: {
            name: 'stroke',
            args: {
              padding: 4,
              attrs: {
                strokeWidth: 4,
                stroke: 'rgba(223,234,255)',
              },
            },
          },
        },
        // 开启拖拽平移（防止冲突，按下修饰键并点击鼠标才能触发画布拖拽）
        panning: {
          enabled: true,
          modifiers: 'shift',
        },
        resizing: true,
        rotating: true,
        selecting: {
          enabled: true,
          multiple: true,
          rubberband: true,
          movable: true,
          showNodeSelectionBox: true,
        },
        snapline: true,
        history: true,
        clipboard: {
          enabled: true,
        },
        keyboard: {
          enabled: true,
        },
        embedding: {
          enabled: true,
          findParent({ node }) {
            const bbox = node.getBBox()
            return this.getNodes().filter((node) => {
              // 只有 data.parent 为 true 的节点才是父节点
              const data = node.getData()
              if (data && data.parent) {
                const targetBBox = node.getBBox()
                return bbox.isIntersectWithRect(targetBBox)
              }
              return false
            })
          },
        },
      })
      this.stencil = new Stencil({
        target: this.graph, // 刚才初始化流程图画板的实例
        stencilGraphWidth: 280,
        search: { rect: true },
        collapsable: true,
        groups: [
          {
            name: 'basic',
            title: '基础节点',
            graphHeight: 180,
          },
          {
            name: 'custom-image',
            title: '系统设计图',
            graphHeight: 600
          },
        ],
      })
      const stencilContainer = document.querySelector('#stencil') // 左侧的节点容器
      stencilContainer?.appendChild(this.stencil.container) // 追加进去
    }
  }
}
</script>

<style scoped lang="scss">
.flow {
  width: 100vw;
  height: 100vh;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
}

#stencil {
  width: 290px;
  height: 100%;
  position: relative;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.panel {
  width: calc(100% - 580px);
  height: 100%;
}

.panel .toolbar {
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  background-color: #f7f9fb;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.panel #container {
  width: 100%;
  height: calc(100% - 38px);
}


.config {
  width: 290px;
  height: 100%;
  padding: 0 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
</style>